<template>
  <v-pagination
    v-model="internalPage"
    :length="totalPages"
    :total-visible="5"
    @update:modelValue="handlePageChange"
    class="pagination"
  />
</template>

<script setup>
import { computed, ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Number,
    required: true,
    default: 1
  },
  pageSize: {
    type: Number,
    required: true,
    default: 10
  },
  total: {
    type: Number,
    required: true,
    default: 0
  }
})

const emit = defineEmits(['update:modelValue', 'page-change'])

const internalPage = ref(props.modelValue)
const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)))

// 同步外部传入的modelValue变化
watch(() => props.modelValue, (newVal) => {
  if (newVal !== internalPage.value) {
    internalPage.value = newVal
  }
})

const handlePageChange = (newPage) => {
  console.log('[Pagination] Page changed to:', newPage)
  emit('update:modelValue', newPage)
  emit('page-change', newPage)
}
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}
</style>